<template>
  <div>
    <div class="redisCach">
      <el-row>
        <el-col :span="8" style="padding-left: 50px">
          <el-card class="card">
            <i class="el-icon-data-analysis"></i>
            <span>缓存列表</span>
            <span class="el-icon-refresh" @click="getCachList"></span>
            <!-- 2、分隔线区域 -->
            <el-divider></el-divider>
            <!-- 3、表单 -->
            <el-table
              :data="cachList"
              style="width: 100%"
              @row-click="cachListClick"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <el-table-column prop="redisKey" label="缓存名称" width="140">
              </el-table-column>
              <el-table-column prop="redisDesc" label="备注" width="140">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="delCach(scope.row)"
                    title="删除"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <!-- 2 -->
        <el-col :span="7" style="padding-left: 20px">
          <el-card class="card">
            <i class="el-icon-thumb"></i>
            <span>键名列表</span>
            <span
              class="el-icon-refresh"
              @click="flushKey"
              v-show="keyList.length > 0"
            ></span>
            <!-- 2、分隔线区域 -->
            <el-divider></el-divider>
            <!-- 3、表单 -->
            <el-table
              :data="keyList"
              style="width: 100%"
              @row-click="keyListClick"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <el-table-column prop="string" label="缓存键名" align="center">
                <template slot-scope="scope">
                  <div style="text-align: center">
                    {{ scope.row.split(":")[1] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="delKey(scope.row)"
                    title="删除"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <!-- 3 -->
        <el-col :span="9" style="padding-left: 20px; padding-right: 50px">
          <el-card class="card">
            <i class="el-icon-notebook-2"></i>
            <span> 缓存内容</span>
            <!-- 2、分隔线区域 -->
            <el-divider></el-divider>
            <!-- 3、表单 -->
            <el-form ref="form">
              <el-form-item label="缓存名称:" :label-width="formLabelWidth">
                <el-input disabled size="small" v-model="cachName"></el-input>
              </el-form-item>
              <el-form-item label="缓存键名:" :label-width="formLabelWidth">
                <el-input disabled size="small" v-model="keyName"></el-input>
              </el-form-item>
              <el-form-item label="缓存内容:" :label-width="formLabelWidth">
                <el-input
                  disabled
                  type="textarea"
                  :rows="10"
                  v-model="keyVale"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { list, listKeys, getRedisValue, del } from "@/services/redisCache";
export default {
  name: "XiaoxxAdminRedisCache",

  data() {
    return {
      formLabelWidth: "1200",
      cachList: [],
      keyList: [],
      cachName: "",
      keyName: "",
      keyVale: "",
    };
  },

  mounted() {
    this.getCachList();
  },

  methods: {
    getCachList() {
      list()
        .then((res) => {
          this.cachList = res.data;
        })
        .catch((error) => {});
    },
    delCach(row) {
      this.$confirm("是否要删除缓存？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let key = row.redisKey + ":*";
          del(key)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getCachList();
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消！",
          });
        });
    },
    delKey(row) {
      this.$confirm("是否要删除键值？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(row)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                let flushRow = {
                  redisKey: row.split(":")[0],
                };
                this.cachListClick(flushRow);
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消！",
          });
        });
    },
    cachListClick(row) {
      listKeys(row.redisKey)
        .then((res) => {
          this.keyList = res.data;
        })
        .catch((error) => {});
    },
    keyListClick(row) {
      getRedisValue(row)
        .then((res) => {
          this.cachName = res.data.key.split(":")[0];
          this.keyName = res.data.key.split(":")[1];
          this.keyVale = res.data.value;
        })
        .catch((error) => {});
    },
    flushKey() {
      let row = {
        redisKey: this.keyList[0].split(":")[0],
      };
      this.cachListClick(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  height: 100vh;
  overflow: auto;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: #ffffff;
  color: #333333;
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #ffffff;
  color: #333333;
}
.el-icon-refresh {
  float: right;
}
.el-icon-refresh:hover {
  color: rgb(2, 174, 218);
  cursor: pointer;
}
</style>